<template>
  <el-dialog
    class="userAlarm-dialog"
    :modal="false"
    :draggable="true"
    :title="title"
    :model-value="modelValue"
    width="80%"
    @update:modelValue="handleClose"
    append-to-body
  >
    <div class="alarm-table">
      <el-table
        :data="tableData"
        max-height="500"
        style="width: 100%; font-size: 16px"
        v-loading="loading"
        element-loading-background="rgba(0,0,0,0.2)"
        :header-cell-style="tableHeaderColor"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
        ref="scrollTable"
      >
        <el-table-column
          v-for="(item, index) in column"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          :align="item.align"
          show-overflow-tooltip
        />
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="params.pageNo" v-model:limit="params.pageSize" @pagination="getList" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { getHouseholdMonitoringAlarm } from '@/api/monitoringForce';

interface TableColumn {
  label: string;
  prop: string;
  width: string;
  align: string;
}

interface TableItem {
  ADDRESS: string;
  WORKLISTTYPE: string;
  WORKLISTLEVEL: string;
  STATE: string;
  PARTINAME: string;
  CREATETIME: string;
  ENDTIME: string;
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '处理记录'
  },
  resid: {
    type: String,
    default: null
  }
});

const emit = defineEmits(['update:modelValue']);

// 响应式数据
const loading = ref(false);
const tableData = ref<TableItem[]>([]);
const total = ref(0);
const scrollTable = ref();

const params = reactive({
  pageNo: 1,
  pageSize: 10,
  resid: props.resid
});

const column = ref<TableColumn[]>([
  { label: '地址', prop: 'ADDRESS', width: '120', align: 'center' },
  { label: '报警类型', prop: 'WORKLISTTYPE', width: '120', align: 'center' },
  { label: '报警级别', prop: 'WORKLISTLEVEL', width: '120', align: 'center' },
  { label: '处理状态', prop: 'STATE', width: '120', align: 'center' },
  { label: '处理人', prop: 'PARTINAME', width: '120', align: 'center' },
  { label: '报警时间', prop: 'CREATETIME', width: '120', align: 'center' },
  { label: '处理时间', prop: 'ENDTIME', width: '120', align: 'center' }
]);

// 方法
const getList = async () => {
  try {
    loading.value = true;
    const res = await getHouseholdMonitoringAlarm(params);

    if (res.data === 'null') {
      tableData.value = [];
      total.value = 0;
    } else {
      tableData.value = JSON.parse(res.data).records;
      total.value = JSON.parse(res.data).totalCount;
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const tableHeaderColor = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex === 0 ? { color: '#00FFFF' } : {};
};

const handleClose = () => {
  params.pageNo = 1;
  params.pageSize = 10;
  tableData.value = [];
  total.value = 0;
  loading.value = false;
  emit('update:modelValue', false);
};

const handleQuery = () => {
  params.pageNo = 1;
  getList();
};

const resetQuery = () => {
  params.pageNo = 1;
  params.pageSize = 10;
  getList();
};

// 监听resid变化
watch(
  () => props.resid,
  (newVal) => {
    params.resid = newVal;
    if (props.modelValue) {
      getList();
    }
  }
);

// 监听dialog打开状态
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      getList();
    }
  }
);
// 关键！暴露属性和方法
defineExpose({
  params,
  getList
});
</script>

<style scoped lang="scss">
.alarm-table {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    /* 全局样式中 */
    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    /* Scrollbar styles */
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;
  }

  .pagination-container.hidden {
    display: none;
  }

  :deep(.el-pagination__total) {
    color: #fff;
  }

  :deep(.el-pagination__jump) {
    color: #fff;
  }

  .el-button {
    color: white;
  }
}
</style>
